/**
 * 新增趋势
 */

import React from 'react';
import { connect } from 'react-redux';

import { ENUM_VIEW } from '../../../schema/constants';

import { TeacherFilter } from '../../components/smart/filter';
import ChartGroup from '../../components/smart/ChartGroup';

import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import SwipeableViews from 'react-swipeable-views';

import { clearData, getDataRequest, GET_DATA_URL_SYMBOL } from '../../actions/fixup-work/dataAction';
import { setCondition } from '../../actions/fixup-work/conditionAction';

import LineChart from '../../components/dump/charts/LineChart';

import moment from 'moment';

import { DATE_FORMATTER } from '../../../schema/constants';

class NewTrend extends React.Component {

	// 构造函数
	constructor(props) {
		super(props);
	}

	/**
	 * 获取图表视图的数据
	 * @param  {integer} view 视图序号
	 */
	getViewData(view = ENUM_VIEW.DAY) {
		let action = getDataRequest(view, 'FixupWorkNewTrend');
		let { dispatch } = this.props;

		dispatch(clearData());
		dispatch(action);
	}

	/**
	 * 处理[日周月]视图变化
	 * @param  {integer} value 视图序号
	 */
	handleViewChange = (value) => {
		if (__DEV__) {
			console.log('切换视图', value);
		}

		this.getViewData(value);
	};

	// 处理日期范围变化
	handleDateRangeChange = (startDate, endDate) => {
		let { dispatch, store } = this.props;

		let action = setCondition('startDate', moment(startDate).format(DATE_FORMATTER));
		dispatch(action);

		action = setCondition('endDate', moment(endDate).format(DATE_FORMATTER));
		dispatch(action);

		this.getViewData(store.data.view);
	};

	handleSearch = () => {
		let { store } = this.props;
		this.getViewData(store.data.view);
	};

	componentDidMount() {
		this.getViewData();
	}

	render() {
		let { store } = this.props;
		let { data, condition } = store;
		let { view, categories, series } = data;

		let { startDate, endDate } = condition;

		return (
			<div className='panel'>
				<h2>新增趋势</h2>
				<TeacherFilter 
					onSearch={this.handleSearch} />
				<ChartGroup 
					onDateRangeChange={this.handleDateRangeChange}
					startDate={startDate}
					endDate={endDate}>
					<Tabs
						onChange={this.handleViewChange}
						value={view}>
						<Tab label="日" value={ENUM_VIEW.DAY} />
						<Tab label="周" value={ENUM_VIEW.WEEK} />
						<Tab label="月" value={ENUM_VIEW.MONTH} />
					</Tabs>
					<SwipeableViews
						className='chart'
						onChangeIndex={this.handleViewChange}
			        	index={-(view - 3)}>
						<div>
							<LineChart title='日新增趋势' subtitle='布置作业-老师-题目' yAxisTitle='数目'
								canUpdate={view===ENUM_VIEW.DAY}
								categories={categories}
								series={series} />
						</div>
						<div>
							<LineChart title='周新增趋势' subtitle='布置作业-老师-题目' yAxisTitle='数目'
								canUpdate={view===ENUM_VIEW.WEEK}
								categories={categories}
								series={series}  />
						</div>
						<div>
							<LineChart title='月新增趋势' subtitle='布置作业-老师-题目' yAxisTitle='数目' 
								canUpdate={view===ENUM_VIEW.MONTH}
								categories={categories}
								series={series}  />
						</div>
			        </SwipeableViews>
				</ChartGroup>
			</div>
		);
	}
}

export default connect((state) => ({ store: state.fixupWork }))(NewTrend);